<template>
  <div class="order-info">
      <van-icon :name="icon" color="white" size="1.5rem" />
      <div class="pay-text">{{text}}</div>
      <div class="botton-box">
        <van-button class="button_gold" @click="goUrl('/gold')">查看交易记录</van-button>
        <van-button class="button_person" @click="goUrl('/person')">返回个人中心</van-button>
      </div>
    </div>
</template>

<script>
  import { checkCode } from "@/api/pay"
  import Vue from 'vue'
  import { Icon,Button } from 'vant';

  Vue.use(Icon).use(Button)
  export default {
    name: 'merchantTicket',
    data () {
        return {
           /** 商户订单号 */
                out_trade_no: '',
                sub_mch_id: '',
                check_code: '',
                icon: 'passed',
                text: '支付成功'
        }
    },
    mounted() {

        this.checkCode();
        let mchData = {
          action: 'onIframeReady',
          displayStyle: 'SHOW_CUSTOM_PAGE'
        }
        let postData = JSON.stringify(mchData)
        parent.postMessage(postData, '*')
        if (document.querySelector('html').style.fontSize == '0px') document.querySelector('html').style.fontSize = '36px'
    },
    created() {
        /** 点金小票的js，需要在head中引入 */
        let head = document.querySelector('head')
        let script = document.createElement('script')
        script.type = "text/javascript"
        script.src = "https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"
        head.appendChild(script)

        let that = this
        let query = this.$route.query
        that.out_trade_no = query.out_trade_no
        that.sub_mch_id = query.sub_mch_id
        that.check_code = query.check_code
        console.log(that.out_trade_no);
        console.log(query.sub_mch_id);
        console.log(query.check_code);
        console.log(location.href.split("?")[0]);
        console.log(process.env.BASE_API);
    },
    methods: {
        checkCode(){
            checkCode({out_trade_no: this.out_trade_no, sub_mch_id: this.sub_mch_id, check_code: this.check_code ,url: location.href.split("?")[0]}).then(res=>{
                console.log(res);
                if(res.code === 20000) {
                  console.log(res.data);
                } else {
                  this.text = "没找到页面";
                  this.icon = "close";
                }
            })
        },
        goUrl(url) {
          /** jumpOutUrl 跳转的页面 */
          var mchData = {
            action: 'jumpOut',
            jumpOutUrl: 'https://hytshop.sumerclub.com' + url
          }
          var pData = JSON.stringify(mchData)
    			parent.postMessage(pData, '*')
        }
      }
  }
</script>

<style lang="stylus" scoped>
  .order-info
      text-align center
      color: white;
      background-image: linear-gradient(to right ,#fd6f66 ,#ef3532);
      border-bottom-right-radius: 15%;
      padding-bottom: 1rem;
      border-radius: 0 0 100px 100px;
  .pay-text
      font-size .50rem
      margin-top 10%
      font-family PingFangSC
  .botton-box
      position fixed
      bottom 10px
      width 80%
      margin-left 10%
      font-family PingFangSC
      .button_gold
          color: #fe6b14;
          background-color: white;
          border-radius: 10px;
          border: 1px solid #fe6b14;
      .button_person
          background-image: linear-gradient(to right ,#fd6f66 ,#ef3532);
          border-radius: 10px;
          border: 1px solid #f79790;
          color white
</style>
